import type Experience from "../Experience";
import type Car from "./Car";

/**
 * 颜色选择器组件
 * 管理车身颜色和贴图的切换
 */
export default class ColorPicker {
  base: Experience;
  car: Car;
  container: HTMLDivElement;
  
  // 颜色配置：包含纯色和贴图
  colors = [
    { type: "color", value: "#f4c430", label: "金色" },
    { type: "color", value: "#26d6e9", label: "青色" },
    { type: "color", value: "#8B7355", label: "棕色" },
    { type: "color", value: "#C0C0C0", label: "银色" },
    { type: "color", value: "#FFFFFF", label: "白色" },
    { type: "color", value: "#4A5568", label: "深灰" },
    { type: "color", value: "#FF5733", label: "橙色" },
    { type: "color", value: "#3B82F6", label: "蓝色" },
    { type: "color", value: "#1E40AF", label: "深蓝" },
    { type: "color", value: "#1F2937", label: "黑色" },
    { type: "texture", value: "girl", label: "女孩1" },
    { type: "texture", value: "girl2", label: "女孩2" },
  ];

  constructor(base: Experience, car: Car) {
    this.base = base;
    this.car = car;
    
    // 创建 UI 容器
    this.container = document.createElement("div");
    this.container.className = "color-picker";
    
    // 创建颜色选项
    this.colors.forEach((colorConfig, index) => {
      const colorButton = document.createElement("div");
      colorButton.className = "color-option";
      
      if (colorConfig.type === "color") {
        // 纯色选项
        colorButton.style.backgroundColor = colorConfig.value;
      } else {
        // 贴图选项 - 使用预览图
        colorButton.style.backgroundImage = `url(${colorConfig.value}.avif)`;
        colorButton.style.backgroundSize = "cover";
        colorButton.style.backgroundPosition = "center";
      }
      
      // 设置初始选中状态（默认青色）
      if (index === 1) {
        colorButton.classList.add("active");
      }
      
      // 添加点击事件
      colorButton.addEventListener("click", () => {
        // 移除所有选中状态
        this.container.querySelectorAll(".color-option").forEach((btn) => {
          btn.classList.remove("active");
        });
        // 设置当前选中
        colorButton.classList.add("active");
        
        // 应用颜色/贴图到车身
        if (colorConfig.type === "color") {
          this.car.setBodyColor(colorConfig.value);
        } else {
          this.car.setBodyTexture(colorConfig.value);
        }
      });
      
      this.container.appendChild(colorButton);
    });
    
    // 添加到 DOM
    document.body.appendChild(this.container);
  }
  
  // 销毁组件
  destroy() {
    this.container.remove();
  }
}
